<template>
  <view>
    <u-sticky >
    <!--tab列表-->
      <view class="bg-white nav-tab-view">
        <scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="tab_scroll">
          <block v-for="(item,index) in nav_list" :key="index">
            <view class="cu-item" :class="index == tab_cur?'select':''" @tap="tabSelect" :data-id="index">
              <view :class="index == tab_cur?'text-black':''">{{item}}</view>
              <view class="tab-dot bg-red"/>
            </view>
          </block>
        </scroll-view>
      </view>
    </u-sticky>
    <!--订单列表-->
    <block v-for="(item,index) in order_list" :key="index" >
      <view class="bg-white order-tab-view" >
        <view class="shop-title-view" style="border-bottom: 0.02rem solid #f3f3f3;" @tap="detailsTap(item)">
          <view class="text-black text-cut shop-name">
            <text class="cuIcon-shop" style="margin-right:10rpx"></text>爱宝租机</view>
          <text class="text-right text-gray text-sm">{{item.status | filterType}}</text>
        </view>
        <!--商品列表-->
        <view class="goods-list-view" @tap="detailsTap(item)">
          <view class="cu-avatar lg radius" :style="[{backgroundImage:'url('+imgUrl+ item.add_file +')'}]"/>
          <view class="goods-info-view">
            <view class="text-black text-cut name">{{item.title}}</view>
            <view class="text-gray text-sm text-cut introduce">规格：{{item.goods_sku_text}}</view>
            <view class="text-gray text-sm text-cut introduce">数量：1</view>
          </view>
        </view>
        <!--统计-->
        <view class="statistics-view" @tap="detailsTap(item)">
          <view class="text-black text-sm text-right">
            <text >总租金：</text>
            <text class="text-price text-lg text-red">{{item.sum_fee}}</text>
            <text>，共{{item.num}}期</text>
          </view>
        </view>
        <view class="btn-view" v-if="item.status == -1">
          <button class="cu-btn line-red sm radius" @click="onPay(item)">去支付</button>
        </view>
        <view class="btn-view" v-else-if="item.status == 1" >
          <button class="cu-btn line-red sm radius" @click="onWithholdSign(item)">签署代扣</button>
        </view>
        <view class="btn-view" v-else-if="item.status == 5" >
          <button class="cu-btn line-red sm radius" @click="buyOut(item)">买断</button>
        </view>
      </view>
    </block>
    <view class="order-footer">
      <u-loadmore v-if="!empty"  :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
      <u-empty v-else mode="list"></u-empty>
    </view>
  </view>
</template>

<script>
import {getPayList,buyOut} from "../../common/http";

import { mapState } from 'vuex'
export default {
  data() {
    return {
      nav_list: ['全部','待付款','待发货','租用中','退款','待买断','已完成'],
      tab_cur: 0,
      tab_scroll: 0,
      order_list: [],
      userId: uni.getStorageSync('userId'),
      page: 1,
      pageSize: 6,
      empty:false,
      loadStatus: 'loading',
      iconType: 'flower',
      nomore: true,
      loadText: {
        loadmore: '轻轻上拉',
        loading: '努力加载中',
        nomore: 'hi,到底啦~'
      },
    }
  },
  onLoad(option) {
    this.tab_cur = option.index || 0;
    this.init()
  },
  onReady() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    });
  },
  computed: {
    ...mapState(['imgUrl']),
  },
  onReachBottom(){
    console.log('到底了')
    if (this.nomore) {
      this.addRandomData();
    }
  },
  methods: {
    init(){
      let req = {
        user_id: this.userId, //用户id
        status: this.tab_cur, //0=全部 1=待发货 2=租用中 3=待归还 4=已完成 5=逾期中 6=已买断
        page: this.page, //分页页码，数字类型
        pageSize: this.pageSize //条数
      }
      getPayList(req).then(res=>{
        if(res.data.data.orderList.length == 0){
          this.empty = true
        }else{
          this.empty = false
        }

        this.order_list = res.data.data.orderList
        if(res.data.data.orderList.length <= res.data.data.count){
          this.loadStatus = 'loadmore'
        }else{
          this.nomore = false
          this.loadStatus = 'nomore'
        }

      })
    },
    tabSelect(e) {
      let index = e.currentTarget.dataset.id;
      this.tab_cur = index;
      this.tab_scroll = (index - 1) * 60;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      this.page = 1;
      this.nomore = true;
      this.init()
    },
    onWithholdSign(e){
      uni.navigateTo({
        url: '/sub_pages/order/paytop?id='+e.id
      });
    },
    detailsTap(e){
      uni.navigateTo({
        url: '/sub_pages/order/detail?id='+e.id
      });
    },
    addRandomData(){
      this.page++;
      let req = {
        user_id: this.userId, //用户id
        status: this.tab_cur,
        page: this.page, //分页页码，数字类型
        pageSize: this.pageSize //条数
      }
      getPayList(req).then(res=>{
        if(res.data.data.orderList.length > 0) {
          this.order_list = this.order_list.concat(res.data.data.orderList);
          this.loadStatus = 'loadmore';
        } else {
          this.loadStatus = 'nomore';
          this.nomore = false
        }
      })
    },
    onPay(item){
      my.navigateTo({
        url: 'plugin://esign/esign?env=prod&flowId='+item.flow_id+'&signerId='+item.account_id+'&skipResult=true&skipGuide=true',
      })
    },
    buyOut(item){
      buyOut({id:item.id}).then(res=>{
        if(res.data.code == 999){
          uni.showToast({
            title: '买断成功',
            icon: 'none'
          })
          this.init()
        }else if(res.data.code == 0){
          my.tradePay({
            // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
            tradeNO: res.data.data,
            success: (res) => {
              console.log(res)
            }
          });
        }else{
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })
    }
  },
  filters: {
    // 过滤订单状态
    filterType(status) {
      if (status === -1) {
        return '未支付'
      } else if (status === 1) {
        return '已签署合同'
      } else if (status === 2) {
        return '已支付'
      } else if (status === 3) {
        return '租用中'
      } else if (status === 4) {
        return '已退款'
      } else if (status === 5) {
        return '待买断'
      } else if (status === 11) {
        return '已签署代扣'
      } else {
        return '已完成'
      }
    },
  }
}
</script>

<style lang="scss" scoped >
page {
  background-color: #FFFFFF;
}
.order-footer{
  padding: 30px;
}
.tags{
  padding-top: calc(var(--status-bar-height) + 140rpx);
}
.nav.z .cu-item {
  height: 64rpx;
  line-height: 64rpx;
  position: relative;
}
.nav.z .cu-item.select {
  font-size: 30rpx;
  .tab-dot {
    position: absolute;
    height: 8rpx;
    border-radius: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    width: 40rpx;
    margin: auto;
  }
}
.nav.z .cu-item.nf.select {
  font-size: inherit;
}
.nav.z .cu-item.cur {
  border-bottom: 0;
}
.nav-tab-view {
  position: sticky;
  padding: 2rpx 0 9.09rpx;
  z-index: 9999;

  padding-top: calc(var(--status-bar-height) + 140rpx);
  /* #ifndef MP */
  top: calc(var(--status-bar-height) + 101rpx);
  /* #endif */

  /* #ifdef MP */
  top: calc(var(--status-bar-height) + 161rpx);
  /* #endif */

  transition: all .25s;
  .nav.z .cu-item.select .tab-dot {
    height: 5.45rpx;
  }
}
.order-tab-view {
  position: relative;
  margin: 0 27.27rpx;
  margin-top: 27.27rpx;
  border-radius: 9.09rpx;
  padding: 27.27rpx 18.18rpx;
  box-shadow: 0 0 14.54rpx #f1f1f1;
  &:last-child {
    margin-bottom: 27.27rpx;
  }
  .shop-title-view {
    position: relative;
    margin-bottom: 27.27rpx;
    .cu-avatar {
      position: absolute;
    }
    .shop-name {
      position: relative;
      height: 47.27rpx;
      line-height: 47.27rpx;
      padding: 0 199.99rpx 0 10rpx;
    }
    .text-right {
      position: absolute;
      top: 7.27rpx;
      right: 0;
    }
  }
  .goods-list-view {
    position: relative;
    margin-top: 27.27rpx;
    .cu-avatar {
      position: absolute;
      width: 158.18rpx;
      height: 158.18rpx;
    }
    .goods-info-view {
      position: relative;
      padding-left: 176.36rpx;
      height: 158.18rpx;
      .name {
        position: relative;
        height: 36.36rpx;
      }
      .introduce {
        position: relative;
        height: 32.72rpx;
        margin-top: 10rpx;
      }
      .tag-view {
        position: relative;
        height: 30.9rpx;
        margin-top: 9.09rpx;
        .cu-tag {
          position: relative;
          top: -3.63rpx;
        }
      }
      .text-price {
        height: 30.9rpx;
        margin-top: 9.09rpx;
      }
    }
  }
  .statistics-view {
    position: relative;
    padding: 18.18rpx 0;
    margin-top: 18.18rpx;
    border-bottom: 2rpx solid #f3f3f3;
  }
  .btn-view {
    position: relative;
    text-align: right;
    margin-top: 18.18rpx;
    .cu-btn {
      background: #FFFFFF;
    }
    .cu-btn + .cu-btn {
      margin-left: 9.09rpx;
    }
  }
}


.foot-tip-view {
  position: relative;
  text-align: center;
  margin-top: 72.72rpx;
  margin: 27.27rpx 0;
  .img-view {
    position: relative;
    margin-bottom: 9.09rpx;
    .cu-avatar {
      background: #FFFFFF;
      background-size: cover;
      background-position: center;
    }
  }
}

.null-view {
  position: relative;
  text-align: center;
  margin-top: 72.72rpx;
  .img-view {
    position: relative;
    margin-bottom: 9.09rpx;
    .cu-avatar {
      width: 363.63rpx;
      height: 363.63rpx;
      background: #FFFFFF;
      background-size: cover;
      background-position: center;
    }
  }
}
</style>
